<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <link rel="stylesheet" href="css/customizedTour.css">
    <title>定制游</title>
</head>

<body>
    <div class="sider-bar">
        <p>我的定制</p>
        <img src="https://m.youxiake.com/20250903114047/img/icon_04.8457515a.png" alt="">
    </div>
    <div class="top">
        <div class="CustomTop__plan">
            <div class="CustomTop__plan__tab">
                <p class="active1">企业团建</p>
                <p>私人定制</p>
            </div>
            <div class="CustomTop__plan__content">
                <div class="CustomTop__plan__content__select">
                    <div class="select_zhengzhou">
                        <p class="selectLocal"></p>
                        <img class="cust-arrow"
                            src="https://m.youxiake.com/20250903114047/img/step_icon_01.7fc54a97.png" alt="">
                    </div>
                    <p class="select_center"></p>
                    <div class="select_zhengzhou">
                        <div>
                            <input type="text" name="" id="" placeholder="目的地">
                        </div>
                        <img class="cust-arrow"
                            src="https://m.youxiake.com/20250903114047/img/step_icon_01.7fc54a97.png" alt="">
                    </div>
                </div>
                <div class="CustomTop__plan__content__block">
                    <p class="write-phone-label">手机号</p>
                    <p>
                        <input class="write-phone" type="text" placeholder="请填写手机号，便于联系您"></input>
                    </p>
                </div>
                <p class="getScheme">获取专属方案</p>
                <div class="CustomTop__line">
                    <p></p>
                </div>
                <div class="CustomTop__instro__title">
                    <p>企业团建</p>
                    <span>独立成团·个性定制</span>
                </div>
                <ul class="intro-step">
                    <li>
                        <div>
                            <img class="step-img" src="https://m.youxiake.com/20250903114047/img/step_01.c0716e1f.png"
                                alt="">
                            <img class="step-arrow"
                                src="https://m.youxiake.com/20250903114047/img/step_icon_01.7fc54a97.png" alt="">
                        </div>
                        <p>提出需求</p>
                    </li>
                    <li>
                        <div>
                            <img class="step-img" src="https://m.youxiake.com/20250903114047/img/step_02.b6d400a6.png"
                                alt="">
                            <img class="step-arrow"
                                src="https://m.youxiake.com/20250903114047/img/step_icon_01.7fc54a97.png" alt="">
                        </div>
                        <p>定制行程</p>
                    </li>
                    <li>
                        <div>
                            <img class="step-img" src="https://m.youxiake.com/20250903114047/img/step_03.cfb8bbff.png"
                                alt="">
                            <img class="step-arrow"
                                src="https://m.youxiake.com/20250903114047/img/step_icon_01.7fc54a97.png" alt="">
                        </div>
                        <p>预约付款</p>
                    </li>
                    <li>
                        <img class="step-img" src="https://m.youxiake.com/20250903114047/img/step_04.c9f3e55e.png"
                            alt="">
                        <p>开心旅行</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="case">
        <img class="case-title" src="https://m.youxiake.com/20250903114047/img/menu_top.de6e647d.png" alt="">
        <ul class="case-options">
            <li>旅行顾问</li>
            <li>国内游</li>
            <li>周边游</li>
            <li>出境游</li>
        </ul>
        <ul class="case-swipe"></ul>
    </div>
    <div class="product">
        <p class="product-recommend">玩法推荐</p>
        <ul class="product-days">
            <li>不限</li>
            <li>1天</li>
            <li>2天</li>
            <li>3天</li>
            <li>3天以上</li>
        </ul>
        <ul class="product-lists"></ul>
    </div>
    <div class="bottom">
        <p>获取专属方案</p>
    </div>
</body>
<script src="js/reset.js"></script>
<script>
    const custTabP = document.querySelectorAll('.CustomTop__plan__tab p');
    custTabP.forEach(item => {
        item.onclick = () => {
            custTabP.forEach(item1 => {
                item1.classList.remove('active1');
            })
            item.classList.add('active1');
        }
    })
    fetch('https://m.youxiake.com/api/m/customize/index').then(res => res.json()).then(res1 => {
        // console.log(res1)
        const selectLocal = document.querySelector('.selectLocal')
        const writePhone = document.querySelector('.write-phone')
        selectLocal.innerHTML = `${res1.data.mdd}`
        writePhone.value = `${res1.data.phone}`
        const caseOptionsLi = document.querySelectorAll('.case-options li');
        caseOptionsLi.forEach((option, index) => {
            option.onclick = () => {
                caseOptionsLi.forEach(item1 => item1.classList.remove('case-option'));
                option.classList.add('case-option');
                // console.log(index);
                const caseSwipe = document.querySelector('.case-swipe');
                caseSwipe.innerHTML = ''
                res1.data.caseList[index].caseDetailList.forEach(item2 => {
                    caseSwipe.innerHTML += `
                        <li>
                            <img class="case-swipe-img"
                                src="${item2.image}" alt="">
                            <p class="case-swipe-name">${item2.title}</p>
                            <p>团队名称：${item2.subtitle}</p>
                        </li>
                    `
                })
                caseSwipe.scrollLeft = 0; // 水平滚动重置
            }
        })
        caseOptionsLi[0].click();
    }).catch(err => {
        console.log(err)
    })
    const productDaysLi = document.querySelectorAll('.product-days li')
    productDaysLi.forEach((item, index) => {
        item.onclick = () => {
            productDaysLi.forEach(item1 => item1.classList.remove('product-day'));
            item.classList.add('product-day');
            console.log(index);
            fetch(`https://m.youxiake.com/api/m/customize/product/list?dayType=${index ? index : null}&page=1`).then(res => res.json()).then(res1 => {
                console.log(res1);
                const productLists = document.querySelector('.product-lists');
                productLists.innerHTML = ''
                res1.data.list.forEach(item2 => {
                    productLists.innerHTML += `
                        <li>
                            <img src="${item2.image}"
                                alt=""></img>
                            <div class="product-list-bottom">
                                <p class="product-title">${item2.productName}</p>
                                <div class="product-price">
                                    <p class="product-price-count">${!isNaN(Number(item2.price)) ? `￥${item2.price}` : item2.price}</p>
                                    <p class="product-price-date">${item2.days}天${item2.nights}晚</p>
                                </div>
                            </div>
                            <p class="product-icon">${item2.typeLabel}</p>
                        </li>
                    `
                })
            }).catch(err => {
                console.log(err)
            })
        }
    })
    productDaysLi[0].click();
    // 新增：滚动显示底部元素逻辑
    const bottomEl = document.querySelector('.bottom');
    bottomEl.style.display = 'none'; // 初始隐藏
    window.addEventListener('scroll', () => {
        // 滚动超过 500px 显示，否则隐藏（可调整数值）
        bottomEl.style.display = window.scrollY > 500 ? 'block' : 'none';
    });
    // 初始化触发一次滚动检查
    window.dispatchEvent(new Event('scroll'));
</script>

</html>